<template>
    <q-table
        class="card-radius my-table"
        wrap-cells
        flat
        bordered
        :columns="columns"
        :rows="filterRows"
        :pagination="{ rowsPerPage: 15 }"
        row-key="id"
        no-data-label="No stock item found."
        no-results-label="The filter didn't uncover any results"
    >
    <template v-slot:top-row="props">
          <ColsFilter :filter="props.cols" ref="colsFilter"></ColsFilter>
      </template>

    </q-table>
</template>

<script setup lang="ts">
import { RepairingOverviewTable, RepairOrderHistory } from 'src/services/type';
import { computed, ref } from 'vue';
import ColsFilter from 'src/components/table/ColsFilter.vue';
import { formatDateTimeString } from 'src/utils/dateUtils';
import { init } from 'echarts';
import { getRepairingOverView } from 'src/services/reportService';


const props = defineProps<{
    repair_detail : string
    system: string
    year: string
}>()

const align = 'left';
const columns = [
  /*   {
    name: 'id',
    label: '#',
    field: 'id',
    sortable: true,
    align,
    search: false,
    style:'width: 10px',
    headerStyle: 'width: 10px'
  }, */
  {
    name: 'system',
    align,
    label: 'System',
    field: 'system',
    sortable: true,
  },
  {
    name: 'serial_no',
    align,
    label: 'Serial No.',
    field: 'serial_no',
    sortable: true,
  },
  {
    name: 'stock_code',
    align,
    label: 'Stock Code',
    field: 'stock_code',
    sortable: true,
  },
  {
    name: 'workgroup',
    align,
    label: 'Work Group',
    field: 'workgroup',
    sortable: true,
  },
  {
    name: 'deliver_to',
    align,
    label: 'Deliver To',
    field: 'deliver_to',
    sortable: true,
  },
  {
    name: 'check_in',
    align,
    label: 'Check In Time',
    field: 'check_in',
    format: (val)=>formatDateTimeString(val),
    headerStyle: 'width: 90px !important', 
    sortable: true,
  },
  {
    name: 'check_out',
    align,
    label: 'Check Out Time',
    field: 'check_out',
    format: (val)=>formatDateTimeString(val),
    headerStyle: 'width: 90px !important', 
    sortable: true,
  },
];
const rows = ref<RepairingOverviewTable[]>([]);

async function initData(){
 const res = await getRepairingOverView(props.repair_detail, props.system, props.year)
    rows.value = res
}

initData()


const colsFilter = ref<typeof ColsFilter>();

function filterFn(row: RepairingOverviewTable) {
  if (colsFilter.value) {
    return colsFilter.value.filterFn(row);
  }
}

const filterRows = computed(() => {
  return rows.value?.filter(filterFn);
});

</script>